<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	
	<style type="text/css">
		@media (min-width:992px) {
			.col-md
			
		}
	</style>
	</head>
	<body>
		<!--什么是框架
			1.框架一般只会实现比较通用的功能(项目的半成品)
			2.热门的框架，使用的人员比较多，社区比较健全
			3.优点：快速开发，对设计要求不高(例如后台管理界面)，常用的功能块
		-->
		<!--https://v3.bootcss.com/css/-->
		<!--栅格系统-->		<!--宽度百分比+浮动+媒体查询-->

		<div class="container">
			<!--行-->
		<div class="row">
			
			<div class="col-xs-4 col-lg-2">4列</div>
		<div class="col-xs-4 col-lg-2">4列</div>
			<<div class="col-xs-4 col-lg-2">4列</div>
			<div class="col-xs-4 col-lg-2">4列</div>
			<div class="col-xs-4 col-lg-2">4列</div>
			<div class="col-xs-4 col-lg-2">4列</div>
		</div>
			<!--手机端： 1列式     平板端：2列式   PC端：4列式-->
			
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-lg-3">example01</div>
				<div class="col-xs-12 col-sm-6 col-lg-3">example02</div>
				<div class="col-xs-12 col-sm-6 col-lg-3">example03</div>
				<div class="col-xs-12 col-sm-6 col-lg-3">example04</div>
			</div>
			
		</div>
		
		<!--列的偏移 原理：margin-left -->
		<div class="row">
			<div class="col-md-4">4列</div>
			<div class="col-md-4 col-md-offset-1_5">4列 偏移4列 </div>
		</div>
		
		<!--列排序 原理：利用定位left和right，注意叠放的问题-->
		 <div class="row">
		 	<div class="col-md-3 col-md-push-9" style="background:skyblue;">3列推9</div>
				<div class="col-md-9 col-md-pull-" style="background:skyblue;">9列拉3</div>
		</div>
		
		
		<div class="row">
			
			<div class="col-xs-12 col-sm-8" style="background: orangered;">
			描述内容
			</div>
			<div class="col-sm-4 hidden-xs">装饰内容</div>
		</div>
		
		<!--<div class="container-fluid">
			<p>这是Bootstrap框架 container-fluid</p>
			
		</div>-->
		
	</body>
</html>
